<template>
	<view class="container">
		<view class="header">
			<view class="header-return" @click="returnclick()"></view>
			<view class="header-title">个人信息</view>
		</view>
		<view class="body">
			<view class="body-personal">
				<view class="body-personal-piece" @click="headportraitedit()">
					<view class="body-personal-piece-title">头像</view>
					<view class="body-personal-piece-icon">
						<img class="body-personal-piece-icon" :src="user.avatar">
					</view>
					<view class="body-personal-piece-arrow"></view>
				</view>
				<view class="body-personal-piece" @click="nameedit()">
					<view class="body-personal-piece-title">昵称</view>
					<view class="body-personal-piece-text">{{ user.nickName }}</view>
					<view class="body-personal-piece-arrow"></view>
				</view>
			</view>
			<view class="body-button" @click="logoutclick()">
				退出登录
			</view>
		</view>
	</view>
</template>
<script>
    import { getUserProfile } from "@/api/system/user"
	import config from '@/config'
	export default {
		data() {
			return {
				user: {
				  nickName: "",
				  avatar: "",
				},
			}
		},
		computed: {
		   refresh() {
		      return this.$store.state.user.refresh
		   }
		},
		watch: {
			refresh: {
				immediate: true,
				handler: function(newval) {
					console.log("newval",newval)
					this.Initialize()
				}
			}
		},
		created() {
		   this.Initialize()
		},
		methods: {
			Initialize(){
				this.getUser()
			},
			getUser() {
			  getUserProfile().then(response => {
				  console.log("getUserProfile",response)
			    let user = response.data
				this.user.avatar = config.baseUrl + user.avatar
			  })
			},
			returnclick(){
				this.$router.push('/pages/mine/index')
			},
			headportraitedit(){
				this.$router.push('/pages/mine/avatar/index')
			},
			nameedit(){
				this.$router.push('/pages/mine/nameedit')
			},
			logoutclick(){
				this.$modal.confirm('确定退出系统吗？').then(() => {
				  this.$store.dispatch('LogOut').then(() => {
				    this.$tab.reLaunch('/pages/login')
				  })
				})
			},
		},
	}
</script>

<style>
.container {
	font-size: 4vw;
	background-color: #F6F7F8;
	width: 100vw;
	/* height: 87.3vh; */
	height: 100vh;
	display: grid;
	justify-items: center;
	align-items: center;
	/* grid-template-columns: 1fr; */
	grid-template-rows: 12.5vw 1fr;
}

.header {
	width: 100%;
	height: 12.5vw;
	background: #ffffff;
	border: 1px solid #F6F7F8;
	display: grid;
	justify-items: center;
	align-items: center;
	/* grid-template-columns: 1fr; */
	/* grid-template-rows: 1fr 1fr; */
}

.header-title {
	font-size: 5vw;
}

.header-return {
	position: absolute;
	width: 5vw;
	height: 5vw;
	left: 5vw;
	top: 3.5vw;
	background: url(../../static/index/return.svg);
	background-size: 100% 100%;
	cursor: pointer;
}

.body {
	width: 100%;
	height: 100%;
	display: grid;
	justify-items: center;
	align-items: center;
	grid-row-gap: 5vw;
	grid-template-rows: 35vw 10vw;
}

.body-personal {
	margin: 5vw 0 0 0;
	width: 100%;
	height: 30vw;
	background: #ffffff;
	display: grid;
	justify-items: center;
	align-items: center;
}

.body-personal-piece {
	width: 100%;
	height: 100%;
	background: #ffffff;
	display: grid;
	justify-items: end;
	align-items: center;
	grid-template-columns: 15% 70% 10%;
	border-top: 1px solid #E8E9EC;
	cursor: pointer;
}

.body-personal-piece-title {
	font-size: 4.3vw;
	color: #303133;
}

.body-personal-piece-arrow {
	width: 5vw;
	height: 5vw;
	background: url(../../static/mine/arrow.svg);
	background-size: 100% 100%;
}

.body-personal-piece-icon {
	width: 8vw;
	height: 8vw;
	/* background: url(../../static/mine/headportrait.svg);
		background-size: 100% 100%; */
}

.body-personal-piece-text {
	font-size: 4vw;
}

.body-button {
	margin: 0 auto 0 auto;
	width: 100%;
	height: 100%;
	background: #ffffff;
	display: grid;
	justify-items: center;
	align-items: center;
	cursor: pointer;
}</style>